<template>
  <view class="min-h-[100vh]" :style="themeColor()">

    <view class="fixed left-0 right-0 bottom-0 product-warp bg-[#2f2f2f] px-[30rpx]">
      <view class="py-[14rpx] flex items-center justify-between">
        <view class="text-center h-[66rpx] text-[30rpx] !text-[#fff] leading-[66rpx]"
            style="width:100%;background: #B13F3F;" @click="myGoodsApply()">发布新商品</view>
<!--        <view :class="['nc-iconfont text-[34rpx] text-[#666]', listType ? 'nc-icon-erweimaV6xx' : 'nc-icon-yingyongliebiaoV6xx']" @click="listIconBtn"></view>-->
      </view>
    </view>
    <mescroll-body ref="mescrollRef" top="20rpx" bottom="50rpx" @init="mescrollInit" :down="{ use: false }" @up="getAllAppListFn">
      <view v-if="articleList.length" :class="['sidebar-marign', !listType ? 'flex justify-between flex-wrap' : '']">
        <template v-for="(item, index) in articleList">
          <template v-if="listType" :key="item.app_id">
            <view class="bg-white flex p-[20rpx] rounded-[16rpx] overflow-hidden mt-[20rpx]" :class="{ 'mb-[20rpx]': (index+1) == articleList.length}">
              <u--image class="rounded-[10rpx] overflow-hidden" width="190rpx" height="190rpx" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
                <template #error>
                  <image class="w-[190rpx] h-[190rpx] rounded-[10rpx] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
                </template>
              </u--image>
              <view class="flex-1 flex flex-col ml-[20rpx] py-[6rpx]">
                <view class="text-[28rpx] text-[#303133] leading-[40rpx]  multi-hidden mb-[10rpx]">{{ item.esGoods.name }}</view>
                <view class="mt-auto flex justify-between items-baseline">
                  <view class="text-[var(--price-text-color)] price-font flex items-baseline">
                    <text class="text-[26rpx] font-500">￥</text>
                    <text class="text-[36rpx] font-500">{{ goodsPrice(item).toFixed(2).split('.')[0] }}</text>
                    <text class="text-[24rpx] font-500">.{{ goodsPrice(item).toFixed(2).split('.')[1] }}</text>
                    <image class="h-[24rpx] w-[72rpx] ml-[6rpx]" v-if="priceType(item) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
                    <image class="h-[24rpx] w-[72rpx] ml-[6rpx]" v-if="priceType(item) == 'discount_price'" :src="img('addon/shop/discount.png')" mode="heightFix" />
                  </view>
                  <view class="flex">
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status != 0">
                      <view @click="myGoodsApply(item.esGoods.es_goods_id)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#ff4500] !text-[#fff]">修改</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 2">
                      <view @click="toRemark(item.esGoods.remark)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#fff] !text-[#000] border-[2rpx] border-solid border-[#8288A2]">查看原因</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 1 && item.esGoods.status === 0">
                      <view @click="confirmMyGoodsStatus(item.esGoods.es_goods_id,1)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#ff4500] !text-[#fff]">上架</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 1 && item.esGoods.status === 1">
                      <view @click="confirmMyGoodsStatus(item.esGoods.es_goods_id,0)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#ff4500] !text-[#fff]">下架</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 0">
                      <text class="text-[22rpx] text-[#999]">等待审核</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
          <template v-else>
            <view class="goods-item-style-two flex flex-col bg-[#2F2F2F] box-border rounded-[8rpx] overflow-hidden mt-[20rpx] text-[#fff] position_r">
              <u--image width="100%" height="350rpx" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
                <template #error>
                  <image class="w-[100%] h-[350rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
                </template>
              </u--image>
              <view class="text-[#fff] bg-[#000000B3] text-[32rpx] p-[12rpx] rounded-[4rpx] dd_sh" v-if="item.esGoods.apply_status === 0">
                等待审核
              </view>
              <view class="px-[16rpx] flex-1 pt-[16rpx] pb-[20rpx] flex flex-col justify-between">
                <view class="text-[#fff] leading-[40rpx] text-[28rpx] multi-hidden">
                  {{ item.esGoods.name }}
                </view>
                <view class="flex justify-between flex-wrap items-baseline mt-[16rpx]">
                  <view class="text-[var(--price-text-color)] price-font flex items-baseline">
                    <!--										<text class="text-[20rpx]  mr-[4rpx]">￥</text>-->
                    <!--										<text class="text-[36rpx] font-500">{{ item.goodsSku.price }}</text>-->

                    <text class="text-[26rpx] font-500">￥</text>
                    <text class="text-[36rpx] font-500">{{ goodsPrice(item).toFixed(2).split('.')[0] }}</text>
                    <text class="text-[24rpx] font-500">.{{ goodsPrice(item).toFixed(2).split('.')[1] }}</text>
                    <image class="h-[24rpx] ml-[6rpx]" v-if="priceType(item) == 'member_price'" :src="img('addon/shop/VIP.png')" mode="heightFix" />
                    <image class="h-[24rpx] ml-[6rpx]" v-if="priceType(item) == 'discount_price'" :src="img('addon/shop/discount.png')" mode="heightFix" />
                  </view>
                  <view class="flex ml-auto mt-[10rpx]">
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status != 0">
                      <view @click="myGoodsApply(item.esGoods.es_goods_id)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#ff4500] !text-[#fff]">修改</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 2">
                      <view @click="toRemark(item.esGoods.remark)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#fff] !text-[#000] border-[2rpx] border-solid border-[#8288A2]">查看原因</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 1 && item.esGoods.status === 0">
                      <view @click="confirmMyGoodsStatus(item.esGoods.es_goods_id,1)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#ff4500] !text-[#fff]">上架</view>
                    </view>
                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 1 && item.esGoods.status === 1">
                      <view @click="confirmMyGoodsStatus(item.esGoods.es_goods_id,0)" class="px-[20rpx] !w-auto text-[24rpx] h-[44rpx] leading-[44rpx] rounded-[22rpx] text-white !bg-[#ff4500] !text-[#fff]">下架</view>
                    </view>
<!--                    <view class="px-[10rpx]" v-if="item.esGoods.apply_status === 0">
                      <text class="text-[22rpx] text-[#999]">等待审核</text>
                    </view>-->
                  </view>
                </view>
              </view>
            </view>
          </template>
        </template>
      </view>
      <view class="mx-[var(--price-text-color)] mt-[20rpx] rounded-[16rpx] noData flex items-center justify-center dis_flex" v-if="!articleList.length && loading">
<!--        <mescroll-empty :option="{tip : '暂无商品'}"></mescroll-empty>-->
        <img src="@/image/goods/no_data.png" alt="" class="h-[242rpx] w-[297.44rpx]"/>
        <text class="text-[#999] text-[30rpx] mt-[20rpx]">暂无商品</text>
      </view>
    </mescroll-body>
<!--    <tabbar />-->
  </view>
  <!-- 失败原因 -->
  <u-popup :show="remarkPopup" :round="16" mode="bottom" :closeable="true" @close="remarkPopup = false">
    <view class="pt-[30rpx] px-[32rpx] pb-[20rpx]">
      <view class="text-center text-[32rpx] font-700 text-[#323233]">失败原因</view>
      <scroll-view :scroll-y="true" class="my-[20rpx] h-[360rpx] overflow-auto">
        <block v-for="(item) in remarkInfo.split('\n')">
          <view class="text-[28rpx] leading-[40rpx] mb-[20rpx]">{{ item }}</view>
        </block>
      </scroll-view>
      <view>
        <button class="primary-btn-bg h-[66rpx] text-[#fff] text-[28rpx] border-[0] leading-[66rpx] rounded-[50rpx]" shape="circle" @click="remarkPopup = false">知道了</button>
      </view>
    </view>
  </u-popup>
<!--  <u-popup :show="confirmPopup" :round="16" mode="center" :closeable="true" @close="confirmPopup = false" :closeOnClickOverlay="false">
    <view class="pt-[30rpx] px-[32rpx] pb-[20rpx]">
      <view class="text-center text-[32rpx] font-700 text-[#323233]">确认操作</view>
      <scroll-view :scroll-y="true" class="my-[20rpx] w-[400rpx] overflow-auto">
      </scroll-view>
      <view class="flex items-center justify-between">
        <button class="primary-btn-bg px-[20rpx] h-[55rpx] text-[#fff] text-[28rpx] border-[2rpx] leading-[55rpx] rounded-[50rpx]" shape="circle" @click="myGoodsStatusFn()">确定</button>
        <button class="px-[20rpx] h-[55rpx] text-[#000] text-[28rpx] leading-[55rpx] rounded-[50rpx] border-[2rpx] border-solid border-[#8288A2]" shape="circle" @click="confirmPopup = false">取消</button>
      </view>
    </view>
  </u-popup>-->
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { t } from '@/locale'
import { redirect, img, getToken } from '@/utils/common';
import {getMyEsGoodsList,myGoodsStatus} from '@/addon/ershou/api/esgoods';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useConfigStore from "@/stores/config";

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const articleList = ref<Array<any>>([]);
const mescrollRef = ref(null);
const loading = ref<boolean>(false);
//列表类型
const listType = ref(false)
onLoad(async (option) => {
})

interface mescrollStructure {
  num: number,
  size: number,
  endSuccess: Function,
  [propName: string]: any
}

const getAllAppListFn = (mescroll: mescrollStructure) => {
  loading.value = false;
  let data: object = {
    page: mescroll.num,
    limit: mescroll.size,
  };
  getMyEsGoodsList(data).then((res: any) => {
    let newArr = (res.data.data as Array<Object>);
    //设置列表数据
    if (Number(mescroll.num) === 1) {
      articleList.value = []; //如果是第一页需手动制空列表
    }
    articleList.value = articleList.value.concat(newArr);
    mescroll.endSuccess(newArr.length);
    loading.value = true;
  }).catch(() => {
    loading.value = true;
    mescroll.endErr(); // 请求失败, 结束加载
  })
}

onMounted(() => {
  setTimeout(() => {
    getMescroll().optUp.textNoMore = t("end");
  }, 500)
});
//列表样式切换
const listIconBtn = () => {
  listType.value = !listType.value
}
const remarkPopup = ref(false)//原因弹窗
const remarkInfo = ref('')//原因内容
const toRemark = (remark:any) => {
  remarkPopup.value = true;
  remarkInfo.value = remark;
}
const myGoodsApply = (id:any) => {
  if(id){
    uni.showModal({
      title: '确认操作',
      content: '修改将会重新发起申请，是否确认继续？',
      confirmColor: useConfigStore().themeColor['--primary-color'],
      success: res => {
        if (res.confirm) {
          redirect({ url: '/addon/ershou/pages/esgoods/my_goods_apply' , param: { es_goods_id: id } })
        }
      }
    })
  }else{
    redirect({ url: '/addon/ershou/pages/esgoods/my_goods_apply'})
  }
}

/*const confirmPopup = ref(false)//原因弹窗
const confirmId = ref('')//修改ID
const confirmStatus = ref('')//修改状态
const confirmMyGoodsStatus = (id:any, value: any) => {
  confirmPopup.value = true;
  confirmId.value = id;
  confirmStatus.value = value;
}
const myGoodsStatusFn = () => {
    confirmPopup.value = false;
    myGoodsStatus({
      es_goods_id: confirmId.value,
      status: confirmStatus.value
    }).then((res) => {
      getMescroll().resetUpScroll();
    })
}*/
const confirmMyGoodsStatus = (id:any, value: any) => {
  let msg = "";
  if(value == 1){
    msg = "商品上架，是否确认继续？";
  }else if(value == 0){
    msg = "商品下架，是否确认继续？";
  }
  uni.showModal({
    title: '确认操作',
    content: msg,
    confirmColor: useConfigStore().themeColor['--primary-color'],
    success: res => {
      if (res.confirm) {
        myGoodsStatus({
          es_goods_id: id,
          status: value
        }).then((res) => {
          getMescroll().resetUpScroll();
        })
      }
    }
  })
}
// 价格类型
const priceType = (data:any) =>{
  let type = "";
  if(data.is_discount && data.goodsSku.sale_price != data.goodsSku.price){
    type = 'discount_price'// 折扣
  }else if(data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
    type = 'member_price' // 会员价
  }else{
    type = ""
  }
  return type;
}
// 商品价格
const goodsPrice = (data:any) => {
  let price = "0.00";
  if (data.is_discount && data.goodsSku.sale_price != data.goodsSku.price) {
    price = data.goodsSku.sale_price ? data.goodsSku.sale_price : data.goodsSku.price // 折扣价
  } else if (data.member_discount && getToken() && data.goodsSku.member_price != data.goodsSku.price) {
    price = data.goodsSku.member_price ? data.goodsSku.member_price : data.goodsSku.price // 会员价
  } else {
    price = data.goodsSku.price
  }
  return parseFloat(price);
}
</script>

<style lang="scss" scoped>
uni-page-body {
  background: #060606;
}
.scroll-view-wrap {
  word-break: keep-all;
}

.text-color {
  color: var(--primary-color);
}

.label-select {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background-color: var(--primary-color-light);
}

.product-warp {
  z-index: 9999;
}

.noData{
  height: calc(100vh - 200rpx - 50px - constant(safe-area-inset-bottom));
  height: calc(100vh - 200rpx - 50px - env(safe-area-inset-bottom));
}
.goods-item-style-two{
  width: calc(50% - 10rpx);
}
:deep(.uni-page-head) {
  background: #060606 !important;
  color: #fff !important;
}
:deep(.uni-page-head svg path) {
  fill: #fff !important;
}
.dis_flex {
  flex-direction: column;
}
.position_r {
  position: relative;
}
.dd_sh {
  position: absolute;
  top: 5rpx;
  left: 5rpx;
}
</style>